<!DOCTYPE html>
<html ng-app="juegoAppModel">

  <head>
    <title>¿Dondé está Carmen San Diego?</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" href="images/iconoCarmenSanDiego.png" type="image/png" />
    <!-- Bootstrap -->
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
      <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap.min.css">
      <link rel="stylesheet" href="stylesheets/bootstrap-theme.min.css">
      <script src="javascripts/bootstrap.min.js"></script>
    <!-- Fin bootstrap -->
    <script type="text/javascript" src="lib/angular.min.js"></script>
    
    <script type="text/javascript" src="javascripts/app.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css">    

  </head>

  <body ng-controller="juegoCtrl">
    <!-- Inicio del nav bar -->
    
    <div class="container" ng-controller="TabController as tab">
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <ul class="nav navbar-nav">
            <li> <img id="navbarHeader" src="images/iconoCarmenSanDiego.png"></li>
            <li ng-class="{ active: tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Informacion</a></li>
            <li ng-class="{ active: tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Orden de arresto</a></li>
            <li ng-class="{ active: tab.isSet(3)}"><a href ng-click="tab.setTab(3); obtenerPistas()">Pistas</a></li>
          </ul>
        </div>
      </nav>
      <!-- Fin del nav bar -->
      <!-- Inicio del Cuerpo -->
      
      <!-- Inicio del Informacion -->
      <div ng-show="tab.isSet(1)" class="jumbotron">
        <center><h2>Pais Actual: {{paisActual()}}</h2></center>
        <!-- Inicio de lugares a donde ir -->
        <center><h3>Siguiente Pais:</h3></center>
        <div class="list-group"  style="width: 45%; margin: 0 auto">
           <div ng-repeat="pais in paises()">
             <a href ng-click="setSiguientePais(pais)" ng-class="{ active: isSetSiguientePais(pais)}" class="list-group-item">{{pais}}</a>
           </div>
        </div>
        <!-- Fin de lugares a donde ir -->
        <br>
        <center><button type="button" class="btn btn-default" ng-click="viajar()" ng-hide="getSiguientePais() === null">Viajar a {{getSiguientePais()}}</button></center>
        
        <h5>Paises ya Visitados Correctos: </h5>
        <div ng-repeat="paisesYV in getPaisesVisitadosCorrectos()">
           <em class="pull-left">{{paisesYV}} -->  </em>
        </div>
        <br>
        <h5>Paises ya Visitados Incorrectos: </h5>
        <div ng-repeat="paisesYV in getPaisesVisitadosIncorrectos()">
           <em class="pull-left">{{paisesYV}} -->  </em>
        </div>
        
      </div>
      <!-- Fin de la informacion -->
      
      <!-- Inicio de la orden de arresto -->
      <div ng-show="tab.isSet(2)" class="jumbotron">
        <center><h2>Orden de arresto: {{orden()}}</h2></center>
        <div>
          <div class="list-group"  style="width: 45%; margin: 0 auto">
          <div ng-repeat="villano in expedientes()">
            <a href ng-click="setOrdenSinEmitir(villano)" ng-class="{ active: isSetOrdenSinEmitir(villano)}" class="list-group-item">{{villano.nombre}}</a>
          </div>
        </div>
        <br>
        <center><button type="button" class="btn btn-default" ng-hide="getOrdenSinEmitir() === null" ng-click="setOrdenDeArresto()">Generar orden para {{getOrdenSinEmitir().nombre}}</button></center>
        
          
        </div>
        
        <div class="jumbotron">
          <div class="col-xs-6 col-md-6">
            <center><h4> Hobbies</h4></center>
            <div class="list-group">
              <div ng-repeat="hobbie in ordenSinEmitir.hobbies">
                <a class="list-group-item">{{hobbie}}</a>
              </div>
            </div>
          </div>
          <div class="col-xs-6 col-md-6">
            <center><h4> Señas Particulares</h4></center>
            <div class="list-group">
              <div ng-repeat="senias in ordenSinEmitir.seniasParticulares">
                <a class="list-group-item">{{senias}}</a>
              </div>
            </div>
          </div>
          
        </div>
        <div class="jumbotron"></div>
        
      </div>
      <!-- Fin de Orden de arresto -->
      
      <!-- Inicio de Pistas -->
      	<div ng-show="tab.isSet(3)" class="jumbotron">
      		<center><h2>Pistas</h2></center>
      		<center><div class="row">
      			<div ng-controller="TabController as tab">
      				<div  class="col-xs-6 col-md-4 thumbnail">
      					<a href ng-click="tab.setTab(2)" class="thumbnail"><img src={{lugares(0).imagen}} height="168" width="145"></a>
      					<h4>{{lugares(0).nombreDelLugar}}</h4>
      					<div ng-show="tab.isSet(2)">
      						<div ng-repeat="p in pistasDelLugar(0)">
      							{{p}}
      						</div>
							<div ng-controller="ModalController as modal">
                  				<button ng-click="toggleModal(); fin()" class="btn btn-default" ng-hide="mostrarBoton(0)">Finalizar Partida</button>
    
			                  <modal title="Resultado" visible="showModal">
              				      <h2>{{esFin}}</h2>
                  			  </modal>
                		   </div>
      					</div>
      					
      				</div>
      				<div  class="col-xs-6 col-md-4 thumbnail" >
      					<a href ng-click="tab.setTab(3)" class="thumbnail"><img src={{lugares(1).imagen}} height="168" width="145"></a>
      					<h4>{{lugares(1).nombreDelLugar}}</h4>
      					<div ng-show="tab.isSet(3)">
      						<div ng-repeat="p in pistasDelLugar(1)">
      							{{p}}
      						</div>
							<div ng-controller="ModalController as modal">
                  				<button ng-click="toggleModal(); fin()" class="btn btn-default" ng-hide="mostrarBoton(1)">Finalizar Partida</button>
    
			                  <modal title="Resultado" visible="showModal">
              				      <h2>{{esFin}}</h2>
                  			  </modal>
                		   </div>
      					</div>	
      				</div>
      				<div  class="col-xs-6 col-md-4 thumbnail" >
      					<a href ng-click="tab.setTab(4)" class="thumbnail"><img src={{lugares(2).imagen}} height="168" width="145"></a>
      					<h4>{{lugares(2).nombreDelLugar}}</h4>
      					<div ng-show="tab.isSet(4)">
      						<div ng-repeat="p in pistasDelLugar(2)">
      							{{p}}
      						</div>
							<div ng-controller="ModalController as modal">
                  				<button ng-click="toggleModal(); fin()" class="btn btn-default" ng-hide="mostrarBoton(2)">Finalizar Partida</button>
    
			                  <modal title="Resultado" visible="showModal">
              				      <h2>{{esFin}}</h2>
                  			  </modal>
                		   </div>
      					</div>	
      				</div>
      			</div>
      		</div></center>
      	
      	</div>

    <!-- Fin de Pistas -->
    
    <!-- Fin del Cuerpo -->
    
    <!-- Inicio del Footer -->
    
    <!-- Fin del Footer -->
  </body>
  
  
</html>